<template>
  <div>
    <v-app>
      <!-- Sizes your content based upon application components -->
      <v-main style="background-color: #F8F8F8; font-size: 0.85rem;">
          <!-- If using vue-router -->
          <router-view ></router-view>
      </v-main>
      <v-bottom-navigation
        v-if="showBottomNav"
        app
        grow
        :link="false"
        :ripple="false"
        active-class="naigation-active"
      >
        <v-btn  to="/" :value="0"> 首页
          <v-icon>mdi-home-outline</v-icon>
        </v-btn>
        <v-btn  to="/loan" :value="1"> 订单
          <v-icon>mdi-script-text-outline</v-icon>
        </v-btn>
        <v-btn  to="/user" :value="2"> 我的
          <v-icon>mdi-account-outline</v-icon>
        </v-btn>
      </v-bottom-navigation>
    </v-app>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
    data() {
        return {
            showBottomNav: !this.$route.meta.hideBottomNav
        };
    },
    created() {
        this.$router.beforeEach((to, from, next) => {
            this.showBottomNav = !to.meta.hideBottomNav;
            next();
        });
    },
  components: {
  },
};
</script>

<style lang="scss">
.v-item-group.v-bottom-navigation .naigation-active.v-btn.v-btn--active {
  .v-btn__content {
      color: #BA2B39;
      caret-color: #BA2B39;
  }
}
</style>
